<template>
  <div>
    <a-button block class="mt-5" type="dashed" @click="handleAdd"> 延误保障人员</a-button>
    <BasicTable @register="registerTable" @edit-change="handleEditChange">
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ActionItem, BasicColumn, BasicTable, EditRecordRow, TableAction, useTable } from '@apps/antd-admin/src/components/Table';

const columns: BasicColumn[] = [
  {
    title: '姓名',
    dataIndex: 'userName',
    editRow: true,
    editRule: async (text) => {
      if (!text?.trim()) {
        return '请输入姓名';
      }
      return '';
    },
  },
  {
    title: '证件类型',
    dataIndex: 'identityType',
    editRow: true,
    editComponent: 'Select',
    editComponentProps: {
      options: [
        { label: '身份证', value: 1 },
        { label: '护照', value: 2 },
        { label: '港澳通行证', value: 3 },
        { label: '台胞证', value: 4 },
      ],
    },
  },
  {
    title: '证件号',
    dataIndex: 'identityNo',
    editRow: true,
    editRule: async (text) => {
      if (!text?.trim()) {
        return '请输入证件号';
      }
      return '';
    },
    width: 180,
  },
  {
    title: '出生日期',
    dataIndex: 'birthDate',
    editComponent: 'DatePicker',
    editRow: true,
    editRule: async (text) => {
      if (!text?.trim()) {
        return '请输入出生日期';
      }
      return '';
    },
    editComponentProps: {
      valueFormat: 'YYYY-MM-DD',
      format: 'YYYY-MM-DD',
    },
    width: 150,
  },
  {
    title: '性别',
    dataIndex: 'sex',
    editRow: true,
    editComponent: 'Select',
    editComponentProps: {
      options: [
        { label: '女', value: 1 },
        { label: '男', value: 2 },
      ],
    },
  },
];
export default defineComponent({
  components: { BasicTable, TableAction },
  setup() {
    const data: any[] = [];
    const [registerTable, { getDataSource }] = useTable({
      columns: columns,
      showIndexColumn: false,
      dataSource: data,
      actionColumn: {
        width: 160,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      pagination: false,
    });

    function handleEdit(record: EditRecordRow) {
      record.onEdit?.(true);
    }

    function handleCancel(record: EditRecordRow) {
      record.onEdit?.(false);
      if (record.isNew) {
        const data = getDataSource();
        const index = data.findIndex((item) => item.key === record.key);
        data.splice(index, 1);
      }
    }

    function handleSave(record: EditRecordRow) {
      record.onEdit?.(false, true);
    }

    function handleEditChange(data: Recordable) {
      //console.log(data);
    }

    function handleAdd() {
      const data = getDataSource();
      const addRow: EditRecordRow = {
        userName: '',
        identityType: 1,
        identityNo: '',
        birthDate: '',
        sex: 1,
        editable: true,
        isNew: true,
        key: `${Date.now()}`,
      };
      data.push(addRow);
    }

    function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
      if (!record.editable) {
        return [
          {
            label: '编辑',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '删除',
          },
        ];
      }
      return [
        {
          label: '保存',
          onClick: handleSave.bind(null, record, column),
        },
        {
          label: '取消',
          popConfirm: {
            title: '是否取消编辑',
            confirm: handleCancel.bind(null, record, column),
          },
        },
      ];
    }

    return {
      registerTable,
      handleEdit,
      createActions,
      handleAdd,
      getDataSource,
      handleEditChange,
    };
  },
});
</script>
